<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <!-- html注释 -->
    <style>
      /* id选择器 匹配某一个元素的时候用 */
      #bx {
        color: crimson;
      }

      /* class选择器 匹配同一个类的元素时候使用 */
      .a {
        color: aqua;
      }

      /* 分组选择器 */
      h3,
      #bx,
      .a {
        background-color: yellow;
      }

      /* 属性选择器 */
      input[type="text"] {
        color: red;
      }

      input[type="password"] {
        color: blue;
      }

      /* 任意元素选择器 */
      * {
        /* 边框：粗细 实心 颜色 */
        border: 1px solid red;
      }
    </style>
  </head>

  <body>
    <input type="text" placeholder="用户名" />
    <input type="password" placeholder="密码" />
    <h3>这是h3</h3>
    <p id="bx">冰箱</p>
    <p>电视</p>
    <p class="a">洗衣机</p>
    <div class="a">苹果</div>
    <div>香蕉</div>
  </body>
</html>
